<template>
	<view class="container">
		<rank-pop :is-show-rank="isShowRank" :user-info="userInfo"></rank-pop>
		<bottom-nav current-index="1" :user-info="userInfo"></bottom-nav>

		<view class="personal-box" v-if="userInfo">
			<view class="personal-avatar" @tap="goStudentMy">
				<image :src="userInfo.userAvatar"></image>
			</view>
			<view class="personal-name">{{userInfo.userName}}</view>
		</view>
		<view class="personal-box" v-else>
			<view class="personal-avatar" @tap="goStudentMy">
				<image src="../../static/images/user_default.png"></image>
			</view>
			<view class="personal-name">您还未登录</view>
		</view>
		
		<view class="search-box" @tap="showSearchAfter">
			<view class="search-before" v-show="isShowSearchBefore">
				<view class="search-icon">
					<image src="../../static/images/search.png"></image>
				</view>
				<view class="search-label">搜索</view>
			</view>
			<view class="search-after" v-show="isShowSearchAfter">
				<view class="search-icon-after">
					<image src="../../static/images/search.png"></image>
				</view>
				<view class="search-input">
					<input v-model="keywords" :focus="isFocus" @blur="showSearchBefore" />
				</view>
			</view>
		</view>
		
		<view class="group-list">
			<block v-for="item in showDataList" :key="item.id">
				<view class="group-item-box" @tap="goChat(item.id)">
					<view class="group-item">
						<view class="group-avatar">
							<image :src="item.avatar"></image>
						</view>
						<view class="group-info">
							<view class="group-name-time">
								<view class="group-name">{{item.name}}</view>
								<view class="group-time">{{item.time}}</view>
							</view>
							<view class="group-msg">{{item.newMsg}}</view>
						</view>
					</view>
				</view>
				<view class="group-item-line-box">
					<view class="group-item-line"></view>
				</view>
			</block>
			<view class="vague">
				<view class="vague-bg">
					<image mode="widthFix" src="../../static/images/group_vague.png"></image>
				</view>
				<view class="vague-btn" @tap="goInviteFriends">分享解锁全部群聊</view>
			</view>
		</view>

		<view class="no-trends-box" v-if="isEmpty">
			<view class="no-trends-img">
				<image src="../../static/images/no_data.png"></image>
			</view>
			<view class="no-trends-label">暂无数据</view>
		</view>
		
	</view>
</template>

<script>
	import rankPop from '../../components/rank_pop.vue'
	import bottomNav from '../../components/bottom_nav.vue'
	import { http, showToastMsg, getTimeStr } from '../../utils'

	export default {
		data() {
			return {
				isShowRank: false,
				isShowSearchBefore: true,
				isShowSearchAfter: false,
				isFocus: false,
				dataList: [],
				showDataList: [
					{id: 1, avatar: 'https://gss0.baidu.com/70cFfyinKgQFm2e88IuM_a/forum/w=580/sign=2ac4499efdfaaf5184e381b7bc5594ed/e3fb8c64034f78f013e97b4b79310a55b2191cba.jpg', name: '招办一对一咨询(王老师)', time: '18:09', newMsg: '大家好了！'},
					{id: 2, avatar: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2313816880,3261029469&fm=26&gp=0.jpg', name: '河南工业大学招办咨询群', time: '17:10', newMsg: '放假了'},
					{id: 3, avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2764517478,1042414673&fm=26&gp=0.jpg', name: '郑州大学招办咨询群', time: '12:35', newMsg: '来跳舞啊'},
				],
				userInfo: {},
				keywords: '',
				isEmpty: false
			}
		},

		components: {
			bottomNav,
			rankPop
		},
		
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
			//this.fetchData()
		},

		methods: {
			
			goInviteFriends() {
				uni.navigateTo({
					url: '/pages/invite_friends/invite_friends'
				})
			},
			
			goStudentMy() {
				uni.navigateTo({
					url: '/pages/student_my/student_my'
				})
			},
			
			doSearch() {
				const that = this
				that.showDataList = that.dataList.filter(function(item) {
					return item.name.includes(that.keywords)
				})
			},
			
			fetchData() {
				const that = this
				http('/user/chatgroup').then(res => {
					if (res.code == 20000) {
						let dataList = res.data
						if (dataList.length > 0 ) {
							for (let i = 0; i < dataList.length; i++) {
								let k = ''
								if (dataList[i].type == 2) {
									k = that.userInfo.userId + '_single_chat_' + dataList[i].id
								} else if (dataList[i].type == 3) {
									k = that.userInfo.userId + '_group_chat_' + dataList[i].id
								}
								let msgList = uni.getStorageSync(k)
								if (msgList && msgList.length > 0) {
									dataList[i].newMsg = msgList[msgList.length-1].msg
									dataList[i].time = getTimeStr(msgList[0].timestamp)
								}
								that.dataList.push(dataList[i])
								that.showDataList = that.dataList
							}
						} else {
							that.isEmpty = true
						}
					} else {
						that.showDataList = []
						that.isEmpty = true
					}
				})
			},
			
			goChat(id) {
				if (t == 2) {
					uni.navigateTo({
						url: '/pages/private_chat/private_chat?id=' + id
					})
				} else if (t == 3) {
					uni.navigateTo({
						url: '/pages/chat/chat?id=' + id
					})
				}
			},

			showSearchAfter() {
				this.isShowSearchBefore = false
				this.isShowSearchAfter = true
				this.isFocus = true
			},

			showSearchBefore() {
				this.isShowSearchBefore = true
				this.isShowSearchAfter = false
				this.isFocus = false
			},

			showRank() {
				this.isShowRank = true
			},

			hideRank() {
				this.isShowRank = false
			},

			goInfo() {
				if (this.userInfo.userType == 1) {
					uni.navigateTo({
						url: '/pages/student_my/student_my'
					})
				} else if (this.userInfo.userType == 2) {
					uni.navigateTo({
						url: '/pages/teacher_zone_index/teacher_zone_index'
					})
				}
				
			}

		}
	}
</script>

<style>
	page {
		color: #333333;
	}
	
	.no-trends-box {
		width: 750rpx;
		height: auto;
		margin-top: 160rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 200rpx;
	}
	
	.no-trends-img image {
		width: 300rpx;
		height: 300rpx;
	}
	
	.no-trends-label {
		font-size: 36rpx;
		color: #666666;
		margin-top: 10rpx;
	}

	.container {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		height: auto;
	}

	.personal-box {
		width: 700rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 20rpx;
		margin-left: 24rpx;
	}
	
	.personal-avatar image {
		width: 64rpx;
		height: 64rpx;
		border-radius: 32rpx;
	}
	
	.personal-name {
		font-size: 24rpx;
		font-weight: bold;
		margin-left: 20rpx;
		color: #333333;
		margin-bottom: 12rpx;
	}

	.search-box {
		width: 700rpx;
		height: 64rpx;
		background-color: #f4f4f4;
		border-radius: 32rpx;
		margin-top: 50rpx;
	}

	.search-before {
		width: 700rpx;
		height: 64rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		align-items: center;
	}

	.search-icon {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		flex: 1;
		padding-right: 10rpx;
	}

	.search-label {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex: 1;
		color: #bcbcbc;
		font-size: 24rpx;
		padding-left: 10rpx;
	}

	.search-box image {
		width: 32rpx;
		height: 32rpx;
	}

	.search-after {
		width: 700rpx;
		height: 64rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}

	.search-icon-after {
		margin-left: 20rpx;
	}

	.search-input {
		margin-left: 20rpx;
	}

	.search-input input {
		font-size: 24rpx;
	}

	.group-item-line-box {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		margin-top: 30rpx;
	}

	.group-item-line {
		width: 610rpx;
		height: 2rpx;
		background-color: #eeeeee;
	}

	.group-list {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 30rpx;
		margin-bottom: 120rpx;
	}

	.group-item-box {
		width: 700rpx;
		margin-top: 30rpx;
	}

	.group-item {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.group-avatar image {
		width: 88rpx;
		height: 88rpx;
		border-radius: 44rpx;
	}

	.group-info {
		width: 584rpx;
	}

	.group-name-time {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.group-name {
		font-size: 30rpx;
		margin-top: 6rpx;
	}

	.group-time {
		font-size: 24rpx;
		color: #999999;
	}

	.group-msg {
		font-size: 24rpx;
		color: #999999;
		margin-top: 10rpx;
	}
	
	.vague {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.vague-bg {
		position: absolute;
		z-index: -1;
	}
	
	.vague image {
		width: 750rpx;
	}
	
	.vague-btn {
		width: 330rpx;
		height: 70rpx;
		background-color: #45d6b7;
		color: #ffffff;
		font-size: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 1;
		margin-top: 34rpx;
		border-radius: 16rpx;
	}
</style>
